<template>
  <div class="app-container">
    <el-form ref="teacherFormRef" :model="teacherForm" label-width="80px">
      <el-form-item label="讲师姓名" prop="name">
        <el-input v-model="teacherForm.name" />
      </el-form-item>
      <!-- 头像部分 -->
      <el-form-item label="讲师头像" prop="avatar">
        <!-- 头像缩略图 -->
        <pan-thumb :image="teacherForm.avatar" />
        <!-- 文件上传按钮 -->
        <el-button
          type="primary"
          icon="el-icon-upload"
          @click="imageCropperShow = true"
        >更换头像</el-button>
        <image-cropper
          v-show="imageCropperShow"
          :key="imageCropperKey"
          :width="300"
          :height="300"
          :url="BASE_API + '/eduoss/fileoss/avatar'"
          field="file"
          @close="close"
          @crop-upload-success="cropSuccess"
        />
      </el-form-item>
      <el-form-item label="讲师排序" prop="sort">
        <el-input-number v-model="teacherForm.sort" :min="0" />
      </el-form-item>
      <el-form-item label="讲师头衔" prop="level">
        <el-select v-model="teacherForm.level" placeholder="请选择头衔">
          <el-option label="高级讲师" :value="1" />
          <el-option label="首席讲师" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="讲师资历" prop="career">
        <el-input v-model="teacherForm.career" />
      </el-form-item>
      <el-form-item label="讲师简介" prop="intro">
        <el-input
          v-model="teacherForm.intro"
          type="textarea"
          placeholder="请输入简介"
          rows="10"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">保存</el-button>
        <el-button type="default" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import PanThumb from '@/components/PanThumb'
import ImageCropper from '@/components/ImageCropper'
import { addTeacher, findTeacher, updateTeacher } from '@/api/edu/teacher'
export default {
  name: 'Teacher',
  components: {
    PanThumb,
    ImageCropper
  },
  data() {
    return {
      teacherForm: {
        name: null, // 讲师姓名
        sort: 0, // 讲师排序
        level: null, // 讲师头衔
        career: null, // 讲师资历
        intro: null, // 简介
        avatar: '' // 头像
      },
      imageCropperShow: false, // 是否显示头像上传框
      imageCropperKey: 0,
      BASE_API: process.env.VUE_APP_BASE_API // 基准路径
    }
  },
  created() {
    this.getTeacherData()
  },
  methods: {
    async getTeacherData() {
      const id = this.$route.params && this.$route.params.id
      if (id) {
        // 修改
        const res = await findTeacher(id)

        this.teacherForm = res.data.item
      }
    },

    async submit() {
      const id = this.$route.params && this.$route.params.id

      if (id) {
        // 修改
        const res = await updateTeacher(id, this.teacherForm)

        this.$router.push('/edu/teacher/list')
      } else {
        // 新增
        const res = await addTeacher(this.teacherForm)

        this.$router.push('/edu/teacher/list')
      }
    },
    reset() {
      this.$refs.teacherFormRef.resetFields()
    },
    close() {
      this.imageCropperShow = false
      this.imageCropperKey = this.imageCropperKey + 1
    },
    cropSuccess(data) {
      this.teacherForm.avatar = data.url
      this.imageCropperShow = false
      this.imageCropperKey = this.imageCropperKey + 1
    }
  }
}
</script>
